<template>
  <div id="Collect">
    <div class="CollectList">
      <el-card class="box-card" v-for="(item, i) in subjectCollectList" :key="i">
        <div slot="header" class="clearfix">
          <span>{{item.subjectName}}</span>
          <el-button @click="cancelCollectTest(item.id)" slot="reference" style="float: right;padding: 5px 5px;" type="primary" icon="el-icon-star-on"></el-button >
        </div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <!-- <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item> -->
          <el-breadcrumb-item v-for="(breadcrumb, ix) in item.sourceMemo" :key="ix" :style="{fontWeight: ix===0&&'bold'}">{{breadcrumb}}</el-breadcrumb-item>
          <el-tag style="float: right" type="text">{{item.sourceTypeName}}</el-tag>
        </el-breadcrumb>
      </el-card>
      <ul class="noShow" v-if="subjectCollectList.length === 0">
        <li class="">
          <svg t="1579701571613" class="icon" viewBox="0 0 1401 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13989" width="128" height="128"><path d="M79.322595 893.564717h21.123951c5.752505 0.121247 10.23865 4.742112 10.238651 10.494616 0 5.752505-4.486145 10.508088-10.238651 10.508089H79.322595v21.110479a10.508088 10.508088 0 0 1-10.508089 10.252122 10.723639 10.723639 0 0 1-7.369133-2.869516 9.928796 9.928796 0 0 1-3.125483-7.247887v-21.123951H37.182466a10.427257 10.427257 0 0 1-10.252122-10.508089c0-5.752505 4.499617-10.508088 10.23865-10.508088H58.333362v-21.11048a10.427257 10.427257 0 0 1 10.508088-10.252122c5.739033 0 10.494616 4.499617 10.494616 10.23865v21.016177z m1279.710017-282.910069v-21.123952a9.928796 9.928796 0 0 0-3.125483-7.247886 10.184762 10.184762 0 0 0-7.369134-2.869517 10.508088 10.508088 0 0 0-10.508088 10.23865v21.016177h-21.123952a9.928796 9.928796 0 0 0-7.247886 3.112011 10.184762 10.184762 0 0 0-2.869517 7.382605c0 5.617786 4.620864 10.508088 10.23865 10.508088h21.137424v21.11048c0 5.752505 4.620864 10.252122 10.494617 10.252122 5.752505 0 10.373369-4.499617 10.508088-10.23865v-21.137423h21.11048c5.752505 0 10.252122-4.620864 10.252122-10.508089a10.508088 10.508088 0 0 0-10.23865-10.494616h-21.258671zM749.617379 960.978145H223.741449a21.016177 21.016177 0 0 1-14.751739-6.129718 21.016177 21.016177 0 0 1-6.129719-14.75174c0-11.491538 9.511167-20.881457 20.881458-20.881457h94.747929a82.407662 82.407662 0 0 1-11.127796-41.628196V271.62061a84.064706 84.064706 0 0 1 24.505401-59.128204 83.727909 83.727909 0 0 1 59.128204-24.384154h62.617429v-20.989233a84.064706 84.064706 0 0 1 24.505401-59.128204 83.943459 83.943459 0 0 1 59.114732-24.370682h501.128036c22.120873 0 43.500791 8.75674 59.128204 24.384154a83.121673 83.121673 0 0 1 24.491929 59.114732v605.993368c0 15.128953-4.001157 29.36876-11.127796 41.628196h115.508139c11.491538 0 20.881457 9.241729 20.881458 20.881457 0 11.491538-9.255201 20.867986-20.881458 20.867986H975.729884v21.002705c0 15.115481-4.001157 29.36876-11.114324 41.628195h11.249043c11.491538 0 20.881457 9.241729 20.881458 20.867986 0 11.491538-9.511167 20.881457-20.881458 20.881457H865.974249a41.762915 41.762915 0 0 1-6.372212 50.869925 41.735971 41.735971 0 0 1-29.503479 12.245965 41.30487 41.30487 0 0 1-29.503479-12.259437l-50.991172-50.735205z m76.372247-41.762915h66.376091a41.668612 41.668612 0 0 0 41.628196-41.87069V270.623689a40.442668 40.442668 0 0 0-40.38878-40.752522H389.365086c-22.255592 0-40.375308 18.240963-40.375308 40.752522v606.734322c0 23.131266 18.752896 41.884162 41.628196 41.884163h317.128715l-10.764054-10.750583a41.641668 41.641668 0 0 1-10.87183-40.375308l-19.749817-19.749818a146.129787 146.129787 0 0 1-197.875386-21.622412c-50.115498-57.875317-46.990015-144.634405 7.005392-198.872307 54.251374-54.386093 141.252956-57.632823 199.24952-7.382605 57.996564 50.250217 67.35954 136.874586 21.245199 198.252599l19.749818 19.749817a41.641668 41.641668 0 0 1 40.375308 10.87183l69.878787 69.878787z m149.740258-104.488119h62.873395a41.803331 41.803331 0 0 0 41.628196-41.762915V167.240266a41.628196 41.628196 0 0 0-41.628196-41.749443H536.869008a41.884162 41.884162 0 0 0-41.628196 41.762915v20.867986h396.747692c22.120873 0 43.500791 8.75674 59.114732 24.384154a83.121673 83.121673 0 0 1 24.505401 59.114732v543.119973h0.134719z m-736.239775-767.62932h31.120108c8.75674 0 15.88338 7.005392 15.88338 15.627413 0 8.622021-7.140111 15.627413-15.88338 15.627413h-31.120108v31.120108c0 8.75674-7.005392 15.88338-15.627413 15.883379-4.122404 0-8.123561-1.751348-11.127796-4.755583a15.088537 15.088537 0 0 1-4.499617-11.114324V78.487336h-31.120108c-4.243651 0-8.244808-1.630101-11.249043-4.499617a15.708245 15.708245 0 0 1-4.620865-11.127796c0-8.622021 7.126639-15.627413 15.869908-15.627413h31.120108v-31.254827c0-8.75674 7.005392-15.869908 15.627413-15.869908 8.622021 0 15.627413 7.126639 15.627413 15.869908v31.120108z m413.25078 757.996906c40.73905-40.73905 40.73905-106.872647 0-147.746416-40.752522-40.752522-106.872647-40.752522-147.746416 0-40.752522 40.752522-40.752522 106.872647 0 147.746416 40.873769 40.752522 106.993894 40.752522 147.746416 0z m-220.130978-491.616869c0-11.491538 9.376448-20.881457 20.881458-20.881457h229.749919c11.491538 0 20.881457 9.38992 20.881458 20.881457 0 11.505009-9.38992 20.881457-20.881458 20.881458H453.491369c-5.496538 0-10.87183-2.128561-14.75174-6.129718a21.016177 21.016177 0 0 1-6.129718-14.75174z m0 104.380344c0-11.505009 9.255201-20.881457 20.746739-20.881458h334.507476c11.491538 0 20.746738 9.255201 20.746739 20.881458 0 11.491538-9.255201 20.881457-20.746739 20.881457h-334.507476a21.016177 21.016177 0 0 1-14.738268-6.129718 20.908401 20.908401 0 0 1-6.008471-14.751739z m20.881458 83.620133h375.27347c11.491538 0 20.881457 9.255201 20.881458 20.881458 0 11.491538-9.38992 20.867986-20.881458 20.867985H453.491369c-5.496538 0-10.87183-2.128561-14.75174-6.129718a21.016177 21.016177 0 0 1-6.129718-14.751739c0-11.491538 9.376448-20.867986 20.881458-20.867986z m-390.806581 41.628196a62.644372 62.644372 0 0 1-54.251374-31.376074 62.321047 62.321047 0 0 1 0-62.617428A62.779091 62.779091 0 0 1 62.684788 417.736925a62.577013 62.577013 0 0 1 62.630901 62.6309 62.523125 62.523125 0 0 1-62.630901 62.738676z m0-31.376074a31.389546 31.389546 0 0 0 27.132423-15.627413 31.28177 31.28177 0 0 0 0-31.362602 31.28177 31.28177 0 0 0-27.132423-15.627413 31.389546 31.389546 0 0 0-31.376074 31.376073 31.443433 31.443433 0 0 0 31.389546 31.254827z m1268.164592-240.123289a62.644372 62.644372 0 0 1-54.237902-31.376074 62.321047 62.321047 0 0 1 0-62.6309 62.779091 62.779091 0 0 1 54.237902-31.362602 62.577013 62.577013 0 0 1 62.630901 62.617428 62.603957 62.603957 0 0 1-62.630901 62.752148z m0-31.254827a31.389546 31.389546 0 0 0 27.132423-15.627413 31.28177 31.28177 0 0 0 0-31.362602 31.28177 31.28177 0 0 0-27.132423-15.627413 31.389546 31.389546 0 0 0-31.362602 31.376074 31.443433 31.443433 0 0 0 31.362602 31.254826z" fill="#cccccc" p-id="13990"></path></svg>
          <span>暂无收藏</span>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import { Center } from './centerApi.js'
export default {
  name: 'Collect',
  data () {
    return {
      subjectCollectList: []
    }
  },
  methods: {
    async getStuSubjectCollect () {
      const res = await Center.getStuSubjectCollect({
        startDate: '',
        endDate: '',
        keyword: ''
      })
      if (res.code !== '200') {
        return this.$message.error(res.message)
      }
      let data = res.data
      this.subjectCollectList = data.subjectCollectList.map(el => {
        let newEl = el
        newEl.sourceMemo = el.sourceMemo.split('\n')
        return newEl
      })
    },
    cancelCollectTest (id) {
      this.$confirm('此操作将取消改题目的收藏, 是否继续?', '取消收藏', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let res = await Center.cancelCollectTest({
          collectId: id
        })
        if (res.code === '200') {
          this.$message({
            message: '取消收藏成功',
            type: 'success'
          })
          this.getStuSubjectCollect()
        } else {
          this.$message.error(res.message)
        }
      })
    }
  },
  mounted () {
    this.getStuSubjectCollect()
  }
}
</script>
<style scoped lang="scss">
#Collect{
  .CollectList{
    min-height: 730px
  }
  .box-card{
    margin: 20px;
    .clearfix{
      height: 32px;line-height: 32px;
    }
  }
  .noShow{
        height: 600px;text-align: center;position: relative;
        li{
            position: absolute;top: 50%;left: 50%;width: 128px;margin-left: -64px;margin-top: -71px;height: 142px;
            svg {
                height: 128px;
            }
            span{
                font-size: 14px;line-height: 1;color: #ccc
            }
        }
    }
}
</style>
